@use '@scss/common' as *;

.wrapper {
  position: relative;
  align-items: center;

  @include mid-break {
    row-gap: 4rem;
  }

  .link {
    width: 100%;
  }
}

.backgroundGrid {
  top: 0;
  height: 100%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: flex-start;
  height: 100%;

  &.hasFullBackground {
    align-self: center;
    height: auto;
    justify-content: center;
  }
}

.richText {
  margin-bottom: 2rem;
}

.contentWrapper {
  max-width: calc(4 / 6 * 100%);

  @include mid-break {
    max-width: 100%;
  }
}

.mediaWrapper {
  position: relative;
}

.media {
  width: calc(100% + calc(var(--gutter-h)));
  grid-row: 1/1;

  @include mid-break {
    width: calc(100% - 2px);
    margin: 0 1px;
    grid-row: 2/3;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.linksWrapper {
  position: relative;
  align-self: flex-end;
  width: 100%;
}

.description {
  margin-bottom: 2rem;
}

.bgSquare {
  grid-row: 1/1;

  @include mid-break {
    grid-row: 2/3;
  }

  img {
    width: 100%;
  }
}

.bgFull {
  position: absolute;
  left: 0;
  top: calc(0px - var(--header-height) - 1px);
  width: 100%;
  height: calc(100% + var(--header-height) + 1px);
  z-index: 0;

  &::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent, rgba(0, 0, 0, 1));
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.hasBreadcrumbsEnabled {
  top: calc(0px - var(--header-height) * 2 - 20px - 1px);
  height: calc(100% + var(--header-height) * 2 + 20px + 1px);
}
